<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <link rel="stylesheet" href="./dp2.css">
</head>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="content">
            <div class="left">
                <div class="l1">
                    <div class="po">交通流量</div>
                    <div class="l1a h">

                    </div>
                </div>
                <div class="l2">
                    <div class="po">交通工具流量</div>
                    <div class="l2a h"></div>
                </div>
                <div class="l3">
                    <div class="po">收费站车流量</div>
                    <div class="l3a h">
                        <table>
                            <thead>
                                <tr>
                                    <td>运输方式</td>
                                    <td>客运量</td>
                                    <td>货运量</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <img src="./images/ksh35.png" alt="">
                                        公路运输
                                    </td>
                                    <td style="color:#05c4a5 ;">4347.2万人</td>
                                    <td style="color:#cdbf11 ;">4347.2万人</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="./images/ksh35.png" alt="">
                                        公路运输
                                    </td>
                                    <td style="color:#05c4a5 ;">4347.2万人</td>
                                    <td style="color:#cdbf11 ;">4347.2万人</td>
                                </tr>
                        
                                <tr>
                                    <td >
                                        <img src="./images/ksh35.png" alt="">
                                        公路运输
                                    </td>
                                    <td style="color:#05c4a5 ;">4347.2万人</td>
                                    <td style="color:#cdbf11 ;">4347.2万人</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="c1"><div class="c1b">
                    <div class="top-One">
                    <p>当前警情数(起)</p>
                    <div class="Small">
                        <h1 style="color:#19bcde ;">67</h1>
                        <div>
                            <p class="s s1">日环比+3%</p>
                            <p class="s s2">周环比-2%</p>
                        </div>
                    </div>
                    </div>
                    <div class="top-Two">
                        <p>区域拥堵指数</p>
                        <div class="Small">
                            <h1 style="color:#19bcde ;">1.4</h1>
                            <div>
                                <p class="s">缓行</p>
                                <p class="s">平均车速120KM/H</p>
                            </div>
                        </div>
                    </div>
                    <div class="top-One">
                        <p>当前警情数(起)</p>
                        <div class="Small">
                            <h1 style="color:#19bcde ;">99</h1>
                            <div>
                                <p class="s s1">日环比+3%</p>
                                <p class="s s2">周环比-2%</p>
                            </div>
                        </div>
                    </div>
                    <div class="top-Two">
                        <p>当前警情数(起)</p>
                        <div class="Small">
                            <h1 style="color:#19bcde ;">7421</h1>
                            <div>
                                <p class="s s2">月环比-2%</p>
                            </div>
                        </div>
                    </div>
                </div></div>
                <div class="c2">
                    <div class="c1a"></div>
                </div>
                <div class="c3">
                    <div class="c2b">
                        <div class="Bleft">
                            <h3>今日实时收费</h3>
                            <p style="font-size: 13px; margin: 5px 0; ">全省数据</p>
                            <div class="table">
                        
                                <span>大网北</span>
                                <span>大同南</span>
                                <span>朔州</span>
                                <br>
                                <span>吕梁北</span>
                                <span>吕梁南</span>
                                <span>太原</span>
                                <br>
                                <span style="color:#04b3c8 ;">晋中</span>
                                <span>太旧</span>
                                <span>长治</span>
                        
                            </div>
                        
                        </div>
                    </div>
                    <div class="c2a"></div>
                </div>
            </div>
            <div class="right">
                <div class="r1">
                    <div class="po">本月发生事件</div>
                    <div class="r1a h"></div>
                </div>
                <div class="r2">
                    <div class="po">收费站收费量</div>
                    <div class="r2a h"></div>
                </div>
                <div class="r3">
                    <div class="po">收费站收费排行</div>
                    <div class="r3a h"></div>
                </div>
            </div>




        </div>




    </div>
</body>
<script src="./echarts.min.js"></script>

<script type="module">
    import china from './中国地图.js'
    

        var l1 = echarts.init(document.querySelector(".l1a"));
        let chartData = {
            xAxisData: [
                "",
                "2015",
                "2016",
                "2017",
                "2018",
                "",
            ],
            finishNum: [28, 51, 43, 43, 48, 51],
            unFinishNum: [28, 39, 36, 36, 31, 91],
            finishRate: [50, 56, 54, 54, 60, 121],
        };
        const l1option = {
            color: ["#009883", "#e66922", "#F4DF58"],
            tooltip: {
                confine: true,
            },
            grid: {
                left: "2%",
                right: "4%",
                bottom: "10%",
                top: "20%",
                containLabel: true,
            },
            legend: {
                left: "right",

                textStyle: {
                    fontSize: 12,
                    color: "#6A93B9",
                    height: 8,
                },
                data: ["高速公路", "城镇公路", "环比", "同比"],
            },
            xAxis: {
                type: "category",
                data: ["",
                    "2015",
                    "2016",
                    "2017",
                    "2018",
                    "",],
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.45)",
                    },
                },
                axisLabel: {
                    fontSize: 12,
                    color: "#6A93B9",
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: [
                {
                    type: "value",
                    min: 0,
                    minInterval: 1,
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.15)",
                            // type: 'dashed', // dotted 虚线
                        },
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: "#6A93B9",
                        fontFamily: "Bebas",
                    },
                },
                {
                    type: "value",
                    min: 0,
                    minInterval: 1,
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.15)",
                            // type: 'dashed', // dotted 虚线
                        },
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: "#6A93B9",
                        fontFamily: "Bebas",
                    },
                },
            ],
            series: [
                {
                    type: "bar",
                    barWidth: 10,

                    name: "高速公路",
                    data: chartData.finishNum,
                },
                {
                    type: "bar",
                    barWidth: 10,

                    name: "城镇公路",
                    data: chartData.unFinishNum,
                },
                {
                    type: "line",
                    yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, // 平滑曲线显示
                    symbol: "circle", // 标记的图形为实心圆
                    symbolSize: 8, // 标记的大小
                    icon: 'circle',
                    name: "环比",
                    data: chartData.unFinishNum,
                },
                {
                    type: "line",
                    yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, // 平滑曲线显示
                    symbol: "circle", // 标记的图形为实心圆
                    symbolSize: 8, // 标记的大小
                    icon: 'circle',

                    name: "同比",
                    data: chartData.finishNum,
                },
            ],
        };

        l1.setOption(l1option);
    
    

        var l3 = echarts.init(document.querySelector('.l2a'));
        const backgroundColor = '#101736';
        var color = ['#7caa20', '#016db0', '#b02e37',]; //2个以上的series就需要用到color数组

        const legend = {
            //data，就是取得每个series里面的name属性。
            orient: 'horizontal',
            icon: 'rect', //图例形状
            padding: 0,
            top: 35,
            right: 40,
            itemWidth: 14, //小圆点宽度
            itemHeight: 5, // 小圆点高度
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 14,
                color: '#ffffff',
            },
        };
        const tooltip = {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        };
        let seriesData = [
            { name: '小型车', data: [120, 132, 101, 134, 90, 230, 210, 220, 210, 210, 166, 88] },
            { name: '中型车', data: [220, 182, 191, 234, 290, 330, 310, 170, 210, 100, 144, 22] },
            { name: '大型车', data: [150, 232, 201, 154, 190, 330, 410, 110, 190, 155, 195, 180] },

        ];
        const commonConfigFn = (index) => {
            return {
                type: 'line',
                smooth: true,
                symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
                symbolSize: 6, //小圆点大小
                itemStyle: {
                    //还是小圆点设置
                },

                label: {
                    show: false, //不显示小圆点上的label文字
                },
                lineStyle: {
                    width: 1, //线条设置

                },

                areaStyle: {
                    //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
                    opacity: 0.2,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: color[index], // 上处的颜色
                            },
                            {
                                offset: 1,
                                color: 'transparent', // 下处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            };
        };

        seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
        const l3option = {
            backgroundColor,
            color,
            tooltip,
            legend,
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true,
            },

            xAxis: {
                show: true, //显示x轴+x轴label文字
                type: 'category',
                boundaryGap: false, //从Y轴出发，这个false很好的
                axisLine: {
                    show: true, //显示x坐标轴轴线
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                axisTick: {
                    show: false, //不显示x坐标1cm刻度
                },
                axisLabel: {
                    color: '#ffffff', //x轴label文字颜色
                },
                splitLine: {
                    show: false, //不显示grid竖向分割线
                },

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                splitLine: {
                    show: false, //不显示grid水平分割线
                },
            },

            series: seriesData,
        };


        l3.setOption(l3option);
    
    
//center1
        var c1 = echarts.init(document.querySelector('.c1a'));
        var geoGpsMap = [125.8154, 44.2584];
        var categoryData = [];
        var barData = [];
        var t = 1;//流入流出控制
        var r = 1;//右侧流入流出文字控制
        var geoCoordMap = {
            "江苏": [118.8062, 31.9208],
            '黑龙江': [127.9688, 45.368],
            '内蒙古': [110.3467, 41.4899],
            "吉林": [125.8154, 44.2584],
            '北京市': [116.4551, 40.2539],
            "辽宁": [123.1238, 42.1216],
            "河北": [114.4995, 38.1006],
            "天津": [117.4219, 39.4189],
            "山西": [112.3352, 37.9413],
            "陕西": [109.1162, 34.2004],
            "甘肃": [103.5901, 36.3043],
            "宁夏": [106.3586, 38.1775],
            "青海": [101.4038, 36.8207],
            "新疆": [87.9236, 43.5883],
            "四川": [103.9526, 30.7617],
            "重庆": [108.384366, 30.439702],
            "山东": [117.1582, 36.8701],
            "河南": [113.4668, 34.6234],
            "安徽": [117.29, 32.0581],
            "湖北": [114.3896, 30.6628],
            "浙江": [119.5313, 29.8773],
            "福建": [119.4543, 25.9222],
            "江西": [116.0046, 28.6633],
            "湖南": [113.0823, 28.2568],
            "贵州": [106.6992, 26.7682],
            "云南": [102.9199, 25.4663],
            "广东": [113.12244, 23.009505],
            "广西": [108.479, 23.1152],
            "海南": [110.3893, 19.8516],
            '上海': [121.4648, 31.2891],
            "西藏": [91.11, 29.97],
        };

        var d1 = {
            '江苏': 10041,
            '黑龙江': 4093,
            '内蒙古': 1157,
            '吉林': 4903,
            '北京市': 2667,
            '辽宁': 8331,
            '河北': 23727,
            '天津': 681,
            '山西': 5352,
            '陕西': 38,
            '甘肃': 77,
            '宁夏': 65,
            '青海': 10,
            '新疆': 22000,
            '四川': 309,
            '重庆': 77,
            '山东': 21666,
            '河南': 15717,
            '安徽': 15671,
            '湖北': 3714,
            '浙江': 3141,
            '福建': 955,
            '江西': 4978,
            '湖南': 778,
            '贵州': 33,
            '云南': 149,
            '广东': 1124,
            '广西': 125,
            '海南': 7,
            '上海': 2155,
            '西藏': 0

        };

        var d2 = {
            '江苏': 159,
            '黑龙江': 5,
            '内蒙古': 54,
            '吉林': 10,
            '北京市': 0,
            '辽宁': 0,
            '河北': 1679,
            '天津': 1,
            '山西': 2698,
            '陕西': 1744,
            '甘肃': 362,
            '宁夏': 429,
            '青海': 122,
            '新疆': 731,
            '四川': 3925,
            '重庆': 1480,
            '山东': 79,
            '河南': 1017,
            '安徽': 208,
            '湖北': 1209,
            '浙江': 1418,
            '福建': 1237,
            '江西': 1004,
            '湖南': 1511,
            '贵州': 345,
            '云南': 1429,
            '广东': 2242,
            '广西': 2271,
            '海南': 59,
            '上海': 8,
            '西藏': 0
        };

        var d3 = {
            '江苏': 11788,
            '黑龙江': 1944,
            '内蒙古': 2954,
            '吉林': 3482,
            '北京市': 1808,
            '辽宁': 5488,
            '河北': 27035,
            '天津': 2270,
            '山西': 13623,
            '陕西': 4221,
            '甘肃': 754,
            '宁夏': 1783,
            '青海': 91,
            '新疆': 1907,
            '四川': 4905,
            '重庆': 1420,
            '山东': 39781,
            '河南': 16154,
            '安徽': 7914,
            '湖北': 6802,
            '浙江': 5812,
            '福建': 3345,
            '江西': 4996,
            '湖南': 5627,
            '贵州': 1504,
            '云南': 2725,
            '广东': 6339,
            '广西': 1009,
            '海南': 0,
            '上海': 1988,

            '西藏': 0

        };

        var d4 = {
            '江苏': 10041,
            '黑龙江': 4093,
            '内蒙古': 1157,
            '吉林': 4903,
            '北京市': 2667,
            '辽宁': 8331,
            '河北': 23727,
            '天津': 681,
            '山西': 5352,
            '陕西': 38,
            '甘肃': 77,
            '宁夏': 65,
            '青海': 10,
            '新疆': 193,
            '四川': 309,
            '重庆': 77,
            '山东': 21666,
            '河南': 15717,
            '安徽': 15671,
            '湖北': 3714,
            '浙江': 3141,
            '福建': 955,
            '江西': 4978,
            '湖南': 778,
            '贵州': 33,
            '云南': 149,
            '广东': 1124,
            '广西': 125,
            '海南': 7,
            '上海': 2155,
            '西藏': 0
        };

        var d5 = {
            '江苏': 159,
            '黑龙江': 5,
            '内蒙古': 54,
            '吉林': 10,
            '北京市': 0,
            '辽宁': 0,
            '河北': 1679,
            '天津': 1,
            '山西': 2698,
            '陕西': 1744,
            '甘肃': 362,
            '宁夏': 429,
            '青海': 122,
            '新疆': 731,
            '四川': 3925,
            '重庆': 1480,
            '山东': 79,
            '河南': 1017,
            '安徽': 208,
            '湖北': 1209,
            '浙江': 1418,
            '福建': 1237,
            '江西': 1004,
            '湖南': 1511,
            '贵州': 345,
            '云南': 1429,
            '广东': 2242,
            '广西': 2271,
            '海南': 59,
            '上海': 8,
            '西藏': 0

        };

        var d6 = {
            '江苏': 11788,
            '黑龙江': 1944,
            '内蒙古': 2954,
            '吉林': 3482,
            '北京市': 1808,
            '辽宁': 5488,
            '河北': 27035,
            '天津': 2270,
            '山西': 13623,
            '陕西': 4221,
            '甘肃': 754,
            '宁夏': 1783,
            '青海': 91,
            '新疆': 1907,
            '四川': 4905,
            '重庆': 1420,
            '山东': 39781,
            '河南': 16154,
            '安徽': 7914,
            '湖北': 6802,
            '浙江': 5812,
            '福建': 3345,
            '江西': 4996,
            '湖南': 5627,
            '贵州': 1504,
            '云南': 2725,
            '广东': 6339,
            '广西': 1009,
            '海南': 0,
            '上海': 1988,
            '西藏': 0
        };
        var year = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"];
        var mapData = [
            [],
            [],
            [],
            [],
            [],
            [],
        ];
        var colors =
            ["#1DE9B6", "#EEDD78", "#32C5E9", "#FFDB5C", "#37A2DA", "#04B9FF"];
        var colorIndex = 0;


        /*柱子Y名称*/
        var categoryData = [];
        var barData = [];

        for (var key in geoCoordMap) {
            mapData[0].push({
                "year": '2020-01',
                "name": key,
                "value": d1[key] / 100,
                "value1": d1[key] / 100,
            });
            mapData[1].push({
                "year": '2020-02',
                "name": key,
                "value": d2[key] / 100,
                "value1": d2[key] / 100,
            });
            mapData[2].push({
                "year": '2020-03',
                "name": key,
                "value": d3[key] / 100,
                "value1": d3[key] / 100,
            });
            mapData[3].push({
                "year": '2020-04',
                "name": key,
                "value": d4[key] / 100,
                "value1": d4[key] / 100,
            });
            mapData[4].push({
                "year": '2020-05',
                "name": key,
                "value": d5[key] / 100,
                "value1": d5[key] / 100,
            });
            mapData[5].push({
                "year": '2020-06',
                "name": key,
                "value": d6[key] / 100,
                "value1": d6[key] / 100,
            });
        }

        for (var i = 0; i < mapData.length; i++) {
            mapData[i].sort(function sortNumber(a, b) { return a.value - b.value });
            barData.push([]);
            categoryData.push([]);
            for (var j = 0; j < mapData[i].length; j++) {
                barData[i].push(mapData[i][j].value1);
                categoryData[i].push(mapData[i][j].name);
            }
        }

        echarts.registerMap('china', china);
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        var convertToLineData = function (data, gps) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var toCoord = geoCoordMap[dataItem.name];
                var fromCoord = gps; //郑州
                //  var toCoord = geoGps[Math.random()*3]; 
                if (fromCoord && toCoord) {
                    if (t == 1) {
                        res.push([{
                            coord: toCoord,
                        }, {
                            coord: fromCoord,
                            value: dataItem.value
                        }]);
                    } else {
                        res.push([{
                            coord: fromCoord,
                            value: dataItem.value
                        }, {
                            coord: toCoord,
                        }]);
                    }

                }
            }
            if (t == 0) {
                t = 1;
            } else {
                t = 0;
            }
            return res;
        };

        const c1option = {
            timeline: {
                data: year,
                axisType: 'category',
                autoPlay: true,
                playInterval: 5000,
                left: '10%',
                right: '10%',
                bottom: '3%',
                width: '80%',
                //  height: null,
                label: {
                    normal: {
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbolSize: 10,
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    borderColor: '#777',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: true,
                    showPrevBtn: true,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },

            },
            // 特效颜色
            baseOption: {

                animation: true,
                animationDuration: 1000,
                animationEasing: 'cubicInOut',
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'cubicInOut',
                grid: {
                    right: '2%',
                    top: '10%',
                    bottom: '10%',
                    width: '18%'
                },
                tooltip: {
                    trigger: 'axis', // hover触发器
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                        shadowStyle: {
                            color: 'rgba(150,150,150,0.2)' //hover颜色
                        }
                    }
                },

                geo: {
                    show: true,
                    map: 'china',
                    roam: true,
                    zoom: 1.5,
                    center: [113.83531246, 34.0267395887],
                    label: {
                        show: false,
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#03479e',
                            borderWidth: 1,
                            areaColor: '#07163b',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
            },
            options: []

        };

        for (var n = 0; n < year.length; n++) {
            // var statistic_name = "各省"+(r==1 ? "流入":"流出")+"流量";
            c1option.options.push({


                title:
                    [{
                        text: '出行服务+大数据',
                        subtext: '东海省交通大数据分析平台',
                        //subtext: '   ',
                        left: '0%',
                        top: '1%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 25
                        }
                    },

                    ],
                xAxis: {
                    type: 'value',
                    scale: true,
                    position: 'top',
                    min: 0,
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 1,
                        textStyle: {
                            color: '#aaa'
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    //  name: 'TOP 20',
                    nameGap: 16,
                    show:false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    data: categoryData[n]
                },

                series: [
                    //未知作用
                    {
                        //文字和标志
                        name: 'light',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(mapData[n]),
                        symbolSize: function (val) {
                            return 6;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colors[n]
                            }
                        }
                    },
                    //地图？
                    {
                        type: 'map',
                        map: 'china',
                        geoIndex: 0,
                        aspectScale: 1, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#FFFFFF',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: mapData
                    },
                    //地图点的动画效果
                    {
                        //  name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(mapData[n].sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbolSize: function (val) {
                            return 5;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colors[n],
                                shadowBlur: 10,
                                shadowColor: colors[n]
                            }
                        },
                        zlevel: 1
                    },
                    //地图线的动画效果
                    {
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 5, //箭头指向速度，值越小速度越快
                            trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 6, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[n],
                                width: 1, //尾迹线条宽度
                                opacity: 0.2, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        data: convertToLineData(mapData[n], geoGpsMap)
                    },

                ]
            });

        }

        c1.setOption(c1option);
    
   

        var c2 = echarts.init(document.querySelector('.c2a'));
        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                shadowBlur: 0,
                shadowColor: '#203665'
            }
        };
        const c2option = {
            // backgroundColor: "#20263f",
            series: [{
                name: '第一个圆环',
                type: 'pie',
                clockWise: false,
                radius: ['100%', '80%'],
                itemStyle: dataStyle,
                hoverAnimation: false,
                center: ['15%', '50%'],
                data: [{
                    value: 70,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#3a7ad5',
                                    align: 'center',
                                    fontSize: 20,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: 16
                                }
                            },
                            formatter: function (params) {
                                return '车辆总数'
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: '#205af7',
                                },
                                {
                                    offset: 1,
                                    color: '#61dcf8',
                                },
                            ]),
                            shadowColor: '#2c6cc4',
                            shadowBlur: 0
                        }
                    }
                }, {
                    value: 30,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        },
                        emphasis: {
                            color: 'transparent'
                        }
                    }
                }]
            }, {
                name: '第二个圆环',
                type: 'pie',
                clockWise: false,
                radius: ['100%', '80%'],
                itemStyle: dataStyle,
                hoverAnimation: false,
                center: ['50%', '50%'],
                data: [{
                    value: 80,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#d03e93',
                                    align: 'center',
                                    fontSize: 20,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: 16
                                }
                            },
                            formatter: function (params) {
                                return "今日上线";
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: '#04de97',
                                },
                                {
                                    offset: 1,
                                    color: '#1dd6be',
                                },
                            ]),
                            shadowColor: '#ef45ac',
                            shadowBlur: 0
                        }
                    }
                }, {
                    value: 20,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        },
                        emphasis: {
                            color: 'transparent'
                        }
                    }
                }]
            }, {
                name: '第三个圆环',
                type: 'pie',
                clockWise: false,
                radius: ['100%', '80%'],
                itemStyle: dataStyle,
                hoverAnimation: false,
                center: ['85%', '50%'],
                data: [{
                    value: 75,
                    label: {
                        normal: {
                            rich: {
                                // 中间的字
                                a: {
                                    color: '#603dd0',
                                    align: 'center',
                                    fontSize: 20,
                                    fontWeight: "bold"
                                },
                                // 上下两个字
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: 16
                                }
                            },
                            formatter: function (params) {
                                return "今日报警";
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: '#e15b05',
                                },
                                {
                                    offset: 1,
                                    color: '#d3910c',
                                },
                            ]),
                            shadowColor: '#613fd1',
                            shadowBlur: 0
                        }
                    }
                }, {
                    value: 25,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        },
                        emphasis: {
                            color: 'transparent'
                        }
                    }
                }]
            }]
        }


        c2.setOption(c2option);
    
    

        var r1 = echarts.init(document.querySelector('.r1a'));
        var color = ['#21fcd6', '#08c8ff', '#df4131', '#df4131', '#715c28'];
        var data = [{
            "name": "闯红灯",
            "value": 20
        },
        {
            "name": "闯禁行",
            "value": 30
        },
        {
            "name": "违停",
            "value": 22
        },
        {
            "name": "逆行",
            "value": 50
        },
        {
            "name": "超速",
            "value": 12
        }
        ];

        var max = data[0].value;
        data.forEach(function (d) {
            max = d.value > max ? d.value : max;
        });

        var renderData = [{
            value: [],
            // name: "告警类型TOP5",
            symbol: 'none',
            lineStyle: {
                normal: {
                    color: '#ecc03e',
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                        [{
                            offset: 0,
                            color: 'rgba(203, 158, 24, 0.8)'
                        }, {
                            offset: 1,
                            color: 'rgba(190, 96, 20, 0.8)'
                        }],
                        false)
                }
            }
        }];


        data.forEach(function (d, i) {
            var value = ['', '', '', '', ''];
            value[i] = max,
                renderData[0].value[i] = d.value;
            renderData.push({
                value: value,
                symbol: 'circle',
                symbolSize: 12,
                lineStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                itemStyle: {
                    normal: {
                        color: color[i],
                    }
                }
            })
        })
        var indicator = [];

        data.forEach(function (d) {
            indicator.push({
                name: d.name,
                max: max,
                color: '#fff'
            })
        })


        const r1option = {
            // backgroundColor: '#01193d',
            tooltip: {
                show: true,
                trigger: "item"
            },
            radar: {
                center: ["50%", "50%"],
                radius: "70%",
                startAngle: 90, // 起始角度
                splitNumber: 4,
                shape: "circle",
                splitArea: {
                    // 背景色
                    areaStyle: {
                        color: 'transparent'
                    }
                },
                axisLabel: {
                    show: false,
                    fontSize: 20,
                    color: "#000",
                    fontStyle: "normal",
                    fontWeight: "normal"
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.5)"
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.5)"
                    }
                },
                indicator: indicator
            },
            series: [{
                type: "radar",
                data: renderData
            }]
        }

        r1.setOption(r1option);
    
   

        var r2 = echarts.init(document.querySelector('.r2a'));
        var geoCoordMap = {
            "海门": [121.15, 31.89],
            "鄂尔多斯": [109.781327, 39.608266],
            "招远": [120.38, 37.35],
            "舟山": [122.207216, 29.985295],
            "齐齐哈尔": [123.97, 47.33],
            "盐城": [120.13, 33.38],
            "赤峰": [118.87, 42.28],
            "青岛": [120.33, 36.07],
            "乳山": [121.52, 36.89],
            "金昌": [102.188043, 38.520089],
            "泉州": [118.58, 24.93],
            "莱西": [120.53, 36.86],
            "日照": [119.46, 35.42],
            "胶南": [119.97, 35.88],
            "南通": [121.05, 32.08],
            "拉萨": [91.11, 29.97],
            "云浮": [112.02, 22.93],
            "梅州": [116.1, 24.55],
            "文登": [122.05, 37.2],
            "上海": [121.48, 31.22],
            "攀枝花": [101.718637, 26.582347],
            "威海": [122.1, 37.5],
            "承德": [117.93, 40.97],
            "厦门": [118.1, 24.46],
            "汕尾": [115.375279, 22.786211],
            "潮州": [116.63, 23.68],
            "丹东": [124.37, 40.13],
            "太仓": [121.1, 31.45],
            "曲靖": [103.79, 25.51],
            "烟台": [121.39, 37.52],
            "福州": [119.3, 26.08],
            "瓦房店": [121.979603, 39.627114],
            "即墨": [120.45, 36.38],
            "抚顺": [123.97, 41.97],
            "玉溪": [102.52, 24.35],
            "张家口": [114.87, 40.82],
            "阳泉": [113.57, 37.85],
            "莱州": [119.942327, 37.177017],
            "湖州": [120.1, 30.86],
            "汕头": [116.69, 23.39],
            "昆山": [120.95, 31.39],
            "宁波": [121.56, 29.86],
            "湛江": [110.359377, 21.270708],
            "揭阳": [116.35, 23.55],
            "荣成": [122.41, 37.16],
            "连云港": [119.16, 34.59],
            "葫芦岛": [120.836932, 40.711052],
            "常熟": [120.74, 31.64],
            "东莞": [113.75, 23.04],
            "河源": [114.68, 23.73],
            "淮安": [119.15, 33.5],
            "泰州": [119.9, 32.49],
            "南宁": [108.33, 22.84],
            "营口": [122.18, 40.65],
            "惠州": [114.4, 23.09],
            "江阴": [120.26, 31.91],
            "蓬莱": [120.75, 37.8],
            "韶关": [113.62, 24.84],
            "嘉峪关": [98.289152, 39.77313],
            "广州": [113.23, 23.16],
            "延安": [109.47, 36.6],
            "太原": [112.53, 37.87],
            "清远": [113.01, 23.7],
            "中山": [113.38, 22.52],
            "昆明": [102.73, 25.04],
            "寿光": [118.73, 36.86],
            "盘锦": [122.070714, 41.119997],
            "长治": [113.08, 36.18],
            "深圳": [114.07, 22.62],
            "珠海": [113.52, 22.3],
            "宿迁": [118.3, 33.96],
            "咸阳": [108.72, 34.36],
            "铜川": [109.11, 35.09],
            "平度": [119.97, 36.77],
            "佛山": [113.11, 23.05],
            "海口": [110.35, 20.02],
            "江门": [113.06, 22.61],
            "章丘": [117.53, 36.72],
            "肇庆": [112.44, 23.05],
            "大连": [121.62, 38.92],
            "临汾": [111.5, 36.08],
            "吴江": [120.63, 31.16],
            "石嘴山": [106.39, 39.04],
            "沈阳": [123.38, 41.8],
            "苏州": [120.62, 31.32],
            "茂名": [110.88, 21.68],
            "嘉兴": [120.76, 30.77],
            "长春": [125.35, 43.88],
            "胶州": [120.03336, 36.264622],
            "银川": [106.27, 38.47],
            "张家港": [120.555821, 31.875428],
            "三门峡": [111.19, 34.76],
            "锦州": [121.15, 41.13],
            "南昌": [115.89, 28.68],
            "柳州": [109.4, 24.33],
            "三亚": [109.511909, 18.252847],
            "自贡": [104.778442, 29.33903],
            "吉林": [126.57, 43.87],
            "阳江": [111.95, 21.85],
            "泸州": [105.39, 28.91],
            "西宁": [101.74, 36.56],
            "宜宾": [104.56, 29.77],
            "呼和浩特": [111.65, 40.82],
            "成都": [104.06, 30.67],
            "大同": [113.3, 40.12],
            "镇江": [119.44, 32.2],
            "桂林": [110.28, 25.29],
            "张家界": [110.479191, 29.117096],
            "宜兴": [119.82, 31.36],
            "北海": [109.12, 21.49],
            "西安": [108.95, 34.27],
            "金坛": [119.56, 31.74],
            "东营": [118.49, 37.46],
            "牡丹江": [129.58, 44.6],
            "遵义": [106.9, 27.7],
            "绍兴": [120.58, 30.01],
            "扬州": [119.42, 32.39],
            "常州": [119.95, 31.79],
            "潍坊": [119.1, 36.62],
            "重庆": [106.54, 29.59],
            "台州": [121.420757, 28.656386],
            "南京": [118.78, 32.04],
            "滨州": [118.03, 37.36],
            "贵阳": [106.71, 26.57],
            "无锡": [120.29, 31.59],
            "本溪": [123.73, 41.3],
            "克拉玛依": [84.77, 45.59],
            "渭南": [109.5, 34.52],
            "马鞍山": [118.48, 31.56],
            "宝鸡": [107.15, 34.38],
            "焦作": [113.21, 35.24],
            "句容": [119.16, 31.95],
            "北京": [116.46, 39.92],
            "徐州": [117.2, 34.26],
            "衡水": [115.72, 37.72],
            "包头": [110, 40.58],
            "绵阳": [104.73, 31.48],
            "乌鲁木齐": [87.68, 43.77],
            "枣庄": [117.57, 34.86],
            "杭州": [120.19, 30.26],
            "淄博": [118.05, 36.78],
            "鞍山": [122.85, 41.12],
            "溧阳": [119.48, 31.43],
            "库尔勒": [86.06, 41.68],
            "安阳": [114.35, 36.1],
            "开封": [114.35, 34.79],
            "济南": [117, 36.65],
            "德阳": [104.37, 31.13],
            "温州": [120.65, 28.01],
            "九江": [115.97, 29.71],
            "邯郸": [114.47, 36.6],
            "临安": [119.72, 30.23],
            "兰州": [103.73, 36.03],
            "沧州": [116.83, 38.33],
            "临沂": [118.35, 35.05],
            "南充": [106.110698, 30.837793],
            "天津": [117.2, 39.13],
            "富阳": [119.95, 30.07],
            "泰安": [117.13, 36.18],
            "诸暨": [120.23, 29.71],
            "郑州": [113.65, 34.76],
            "哈尔滨": [126.63, 45.75],
            "聊城": [115.97, 36.45],
            "芜湖": [118.38, 31.33],
            "唐山": [118.02, 39.63],
            "平顶山": [113.29, 33.75],
            "邢台": [114.48, 37.05],
            "德州": [116.29, 37.45],
            "济宁": [116.59, 35.38],
            "荆州": [112.239741, 30.335165],
            "宜昌": [111.3, 30.7],
            "义乌": [120.06, 29.32],
            "丽水": [119.92, 28.45],
            "洛阳": [112.44, 34.7],
            "秦皇岛": [119.57, 39.95],
            "株洲": [113.16, 27.83],
            "石家庄": [114.48, 38.03],
            "莱芜": [117.67, 36.19],
            "常德": [111.69, 29.05],
            "保定": [115.48, 38.85],
            "湘潭": [112.91, 27.87],
            "金华": [119.64, 29.12],
            "岳阳": [113.09, 29.37],
            "长沙": [113, 28.21],
            "衢州": [118.88, 28.97],
            "廊坊": [116.7, 39.53],
            "菏泽": [115.480656, 35.23375],
            "合肥": [117.27, 31.86],
            "武汉": [114.31, 30.52],
            "大庆": [125.03, 46.58]
        };

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push(geoCoord.concat(data[i].value));
                }
            }
            return res;
        };

        const r2option = {
            title: {
                text: '热力图',
                subtext: '',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            // backgroundColor: '#404a59',
            visualMap: {
                min: 0,
                max: 500,
                splitNumber: 5,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                zoom: 2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#07163b',
                        borderColor: '#0554b5'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [{
                name: 'AQI',
                type: 'heatmap',
                pointSize: 20,
                coordinateSystem: 'geo',
                data: convertData([
                    { name: "海门", value: 10 },
                    { name: "鄂尔多斯", value: 12 },
                    { name: "招远", value: 11 },
                    { name: "舟山", value: 11},
                    { name: "齐齐哈尔", value: 11 },
                    { name: "盐城", value: 10},
                    { name: "赤峰", value: 16 },
                    { name: "青岛", value: 45 },
                    { name: "乳山", value: 11},
                    { name: "金昌", value: 11 },
                    { name: "泉州", value: 21 },
                    { name: "莱西", value: 30 },
                    { name: "日照", value: 21 },
                    { name: "胶南", value: 25 },
                    { name: "南通", value: 23 },
                    { name: "拉萨", value: 31 },
                    { name: "云浮", value: 44 },
                    { name: "梅州", value: 25 },
                    { name: "文登", value: 46 },
                    { name: "上海", value: 12 },
                    { name: "攀枝花", value: 12 },
                    { name: "威海", value: 25 },
                    { name: "承德", value: 25 },
                    { name: "厦门", value: 12 },
                    { name: "汕尾", value: 26 },
                    { name: "潮州", value: 24 },
                    { name: "丹东", value: 227 },
                    { name: "太仓", value: 427 },
                    { name: "曲靖", value: 327 },
                    { name: "烟台", value: 28 },
                    { name: "福州", value: 29 },
                    { name: "瓦房店", value: 30 },
                    { name: "即墨", value: 30 },
                    { name: "抚顺", value: 31 },
                    { name: "玉溪", value: 31 },
                    { name: "张家口", value: 31 },
                    { name: "阳泉", value: 31 },
                    { name: "莱州", value: 32 },
                    { name: "湖州", value: 32 },
                    { name: "汕头", value: 32 },
                    { name: "昆山", value: 33 },
                    { name: "宁波", value: 33 },
                    { name: "湛江", value: 33 },
                    { name: "太原", value: 139 },
                    { name: "清远", value: 139 },
                    { name: "中山", value: 139 },
                    { name: "昆明", value: 139 },
                    { name: "寿光", value: 140 },
                    { name: "盘锦", value: 40 },
                    { name: "长治", value: 41 },
                    { name: "深圳", value: 41 },
                    { name: "珠海", value: 42 },
                    { name: "宿迁", value: 43 },
                    { name: "咸阳", value: 43 },
                    { name: "铜川", value: 44 },
                    { name: "平度", value: 44 },
                    { name: "佛山", value: 44 },
                    { name: "海口", value: 44 },
                    { name: "江门", value: 45 },
                    { name: "章丘", value: 45 },
                    { name: "肇庆", value: 46 },
                    { name: "大连", value: 47 },
                    { name: "临汾", value: 47 },
                    { name: "吴江", value: 47 },
                    { name: "石嘴山", value: 49 },
                    { name: "沈阳", value: 50 },
                    { name: "苏州", value: 50 },
                    { name: "茂名", value: 50 },
                    { name: "嘉兴", value: 51 },
                    { name: "长春", value: 51 },
                    { name: "胶州", value: 52 },
                  
                    { name: "成都", value: 58 },
                    { name: "大同", value: 58 },
                    { name: "镇江", value: 59 },
                    { name: "桂林", value: 59 },
                    { name: "张家界", value: 59 },
                    { name: "宜兴", value: 59 },
                    { name: "北海", value: 60 },
                    { name: "西安", value: 61 },
                    { name: "金坛", value: 62 },
                    { name: "东营", value: 62 },
                    { name: "牡丹江", value: 63 },
                    { name: "遵义", value: 63 },
                    { name: "绍兴", value: 63 },
                    { name: "扬州", value: 64 },
                    { name: "常州", value: 64 },
                    { name: "潍坊", value: 65 },
                    { name: "重庆", value: 66 },
                    { name: "台州", value: 67 },
                    { name: "南京", value: 67 },
                    { name: "滨州", value: 70 },
                    { name: "贵阳", value: 71 },
                    { name: "无锡", value: 71 },
                    { name: "本溪", value: 71 },
                    { name: "克拉玛依", value: 72 },
                    { name: "渭南", value: 72 },
                    { name: "马鞍山", value: 72 },
                    { name: "宝鸡", value: 72 },
                    { name: "焦作", value: 75 },
                    { name: "句容", value: 75 },
                    { name: "北京", value: 79 },
                    { name: "徐州", value: 79 },
                    { name: "衡水", value: 80 },
                    { name: "包头", value: 80 },
                    { name: "绵阳", value: 80 },
                    { name: "乌鲁木齐", value: 84 },
                    { name: "枣庄", value: 84 },
                    { name: "杭州", value: 84 },
                    { name: "淄博", value: 85 },
                    { name: "鞍山", value: 86 },
                    { name: "溧阳", value: 86 },

                    { name: "温州", value: 95 },
                    { name: "九江", value: 96 },
                    { name: "邯郸", value: 98 },
                    { name: "临安", value: 99 },
                    { name: "兰州", value: 99 },
                    { name: "沧州", value: 100 },
                    { name: "临沂", value: 103 },
                    { name: "南充", value: 104 },
                    { name: "天津", value: 105 },
                    { name: "富阳", value: 106 },
                    { name: "泰安", value: 112 },
                    { name: "诸暨", value: 112 },
                    { name: "郑州", value: 113 },
                    { name: "哈尔滨", value: 114 },
                    { name: "聊城", value: 116 },
                    { name: "芜湖", value: 117 },
                    { name: "唐山", value: 119 },
                    { name: "平顶山", value: 119 },
                    { name: "邢台", value: 119 },
                    { name: "德州", value: 120 },
                    { name: "济宁", value: 120 },
                    { name: "荆州", value: 127 },
                    { name: "宜昌", value: 130 },
                    { name: "义乌", value: 132 },
                    { name: "丽水", value: 133 },
                    { name: "洛阳", value: 134 },
                    { name: "秦皇岛", value: 136 },
                    { name: "株洲", value: 143 },
                    { name: "石家庄", value: 147 },
                    { name: "莱芜", value: 148 },
                    { name: "常德", value: 152 },
                    { name: "保定", value: 153 },
                    { name: "湘潭", value: 154 },
                    { name: "金华", value: 157 },
                    { name: "岳阳", value: 169 },
                    { name: "长沙", value: 175 },
                    { name: "衢州", value: 177 },
                    { name: "廊坊", value: 193 },
                    { name: "菏泽", value: 194 },
                    { name: "合肥", value: 229 },
                    { name: "武汉", value: 273 },
                    { name: "大庆", value: 279 }
                ])
            }]
        };

        r2.setOption(r2option);
    
    

        var r3 = echarts.init(document.querySelector('.r3a'));
        const r3option = {
            tooltip: {},
            xAxis: {
                max: 2000,
                splitLine: {
                    show: false
                },
                offset: 10,
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    },

                },
                axisLabel: {
                    margin: 10
                }
            },
            yAxis: {
                data: ["临汾", "忻州", "运城", "大同", '朔州'],
                label: {
                    color: '#fff'
                },
                inverse: true,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    color: "#1dd6be",
                    fontSize: 16
                }
            },
            grid: {
                top: "center",
                height: 200,
                left: 70,
                right: 100
            },
            series: [{
                type: "pictorialBar",
                symbol: 'image://',
                symbolRepeat: "fixed",
                symbolMargin: "5%",
                symbolClip: true,
                symbolSize: 15,
                symbolBoundingData: 2000,
                data: [891, 1220, 660, 1670, 400],
                z: 10
            }]
        }


        r3.setOption(r3option);
    
</script>

</html>